<template>
  <div class="login">
    <div class="login-config">
      <div class="login-config-btn">
        <!-- 国际化 -->
        <el-dropdown trigger="click" @command="configLang">
          <el-button circle>
            <el-icon>
              <ChatDotRound />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in config.LANG" :key="item" :command="item">{{ item.name
                }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 黑化模式 -->
        <el-button circle @click="configDark">
          <el-icon v-if='dark'>
            <Sunny />
          </el-icon>
          <el-icon v-else>
            <Moon />
          </el-icon>
        </el-button>
        <!-- 关闭软件 -->
        <el-button icon="close" circle type="default" @click="closeWindow"></el-button>
      </div>
    </div>
    <!--左侧-->
    <div class="login_adv">
      <div class="login_adv_title">
        <h2>{{ $t('login.name') }}</h2>
        <h4>{{ $t('login.slogan') }}</h4>
        <p>{{ $t('login.business') }}</p>
      </div>
      <div class="login_adv_mask"></div>

      <div class="login_adv_imgage">
        <img src="../assets/images/data.png" width="100%" />
      </div>
      <div class="login_adv_bottom">{{ $t('login.Version_number') }}</div>
    </div>
    <!--右侧-->
    <div class="login-main">
      <div class="login-form">
        <div class="login-header">
          <div class="login-img">
            <img src="../assets/images/10001.png" alt="" style="width: 77px; height: 80px" />
            <label>{{ $t('login.name_slogan') }}</label>
          </div>
        </div>
        <el-tabs>
          <el-tab-pane :label="$t('login.accountLogin')" lazy style="height: 300px;">
            <password-from></password-from>
          </el-tab-pane>
          <el-tab-pane :label="$t('login.mobileLogin')" lazy style="height: 300px;">
            <PhoneFrom></PhoneFrom>
          </el-tab-pane>
        </el-tabs>
        <template v-if="true">
          <el-divider>{{ $t('login.signInOther') }}</el-divider>
          <div class="login-oauth">
            <!--微信按钮-->
            <!-- 模拟跳转到登录页面 -->
            <el-button type="success" circle size="large">
              <!-- <el-icon>
                <Service />
              </el-icon> -->
              <el-icon>
                <ChromeFilled />
              </el-icon>
            </el-button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, getCurrentInstance, ComponentInternalInstance } from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
//设置回到登录页面的窗口变化
onMounted(() => {
  // window.electron.ipcRenderer.invoke('Login-size')
});
import PasswordFrom from './login/components/PasswordFrom.vue';
import PhoneFrom from './login/components/PhoneFrom.vue';
// 关闭窗口
const closeWindow = () => {
  window.electron.ipcRenderer.invoke('renderer-to-main', {
    name: 'close-login'
  })
}

// 黑化模式
const dark = ref<string | null>(localStorage.getItem('dark'));
const configDark = () => {
  const element = document.querySelector('html') as HTMLElement | null;
  if (element) {
    if (dark.value == 'dark') {
      element.className = ''
    } else {
      element.className = 'dark'
    }
    dark.value = element.className
    localStorage.setItem('dark', dark.value)
  }
}

// 国际化
const config = reactive({
  LANG: [
    { name: '中文', value: 'zh-cn' },
    { name: 'EngLish', value: 'en' }
  ]
})
const configLang = (item: { name: string; value: string }) => {
  // 调整
  const $i18n = proxy?.$i18n;
  $i18n!.locale = item.value
  localStorage.setItem('lang', item.value)
  // 这一步已经可以实现了
  // proxy.$i18n.locale = item.value
  console.log(proxy, item)
}
</script>
<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
}

.login_adv {
  background: url('../assets/images/auth_banner.jpg') no-repeat;
  width: 40%;
  position: relative;
}

.login_adv_title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 40px;
  color: #fff;
}

.login_adv_title h2 {
  font-size: 40px;
}

.login_adv_title h4 {
  font-size: 18px;
  margin-top: 10px;
}

.login_adv_title p {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.8;
  color: rgb(255, 255, 255, .6);
}

.login_adv_imgage {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 80px;
  padding: 40px;
  z-index: 3;
}

.login_adv_imgage img {
  width: 100%;
  height: 100%;
}

.login_adv_bottom {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: #fff;
  padding: 0 40px 40px 40px;
}

.login_adv_mask {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}

.login-main {
  flex: 1;
  display: flex;
  overflow: auto;
}

.login-form {
  width: 400px;
  margin: auto;
  padding: 80px 0 0 0;
}

.login-header {
  margin-bottom: 40px;
}

.login-header .login-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-header .login-img img {
  width: 40px;
  height: 40px;
  vertical-align: bottom;

}

.login-header .login-img label {
  font-size: 26px;
  font-weight: bold;
}

.login-oauth {
  display: flex;
  justify-content: space-around;
}

/* 关闭按钮样式 */
.login-config {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
}

.login-config-btn {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 120px;
  margin: 10px 0px 0 20px;
  float: right;
  align-items: center;
}

.el-button+.el-button {
  margin-left: 0px;
}
</style>
